﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0049)http://colorschemedesigner.com/sample/index2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>Sample</title>
	<link rel="stylesheet" href="../../style/style2.css" type="text/css" media="screen">
<script type="text/javascript">

</script>

<style type="text/css" id="css">
</style>

</head><body>

<div id="topbg"></div>

<div id="main">


	<div id="header">
		<div id="hdr-overlay"></div>
		<div id="hdr-box1" class="box bg-pri-1"></div>
		<div id="hdr-box2" class="box bg-pri-2"></div>
		<div id="hdr-box3" class="box bg-pri-3"></div>
		<div id="hdr-box4" class="box bg-pri-4"></div>
		<h1>lorem ipsum</h1>
		<h2>Duis aute irure dolor</h2>
	</div>

    <span id="menu"><ul>
<li><a href="
../../Home.htm
"><span></span>
Home
</a>
</li>
<li><a href="
../../ContactUs.htm
"><span></span>
Contact Us
</a>
</li>
</ul>
</span>

	<div id="content">

		<div id="left">
			<h3 class="ttl">Mollit Anim</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <a href="http://colorschemedesigner.com/sample/index2.html#">incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <a href="http://colorschemedesigner.com/sample/index2.html#">nostrud</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
			<dl>
				<dt class="ttl">Lorem</dt>
				<dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</dd>
				<dt class="ttl">Ipsum</dt>
				<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
			</dl>
			<img id="ico" src="./Sample_files/l.png">
			<h4>Duis aute irure dolor</h4>
			<ul>
				<li><a href="http://colorschemedesigner.com/sample/index2.html#">Lorem ipsum</a></li>
				<li><a href="http://colorschemedesigner.com/sample/index2.html#">Dolor sit amet</a></li>
				<li><a href="http://colorschemedesigner.com/sample/index2.html#">Consectetur adipisicing</a></li>
			</ul>
		</div>

		<div id="right">
			<h3 class="ttl"><span></span>Lorem ipsum dolor sit amet</h3>
			<img class="photo" src="./Sample_files/photo1.jpg">
			<h4>Duis aute</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
			</p>
			<p class="link"><a href="http://colorschemedesigner.com/sample/index2.html#">Ut laboreâ€¦ Â»</a></p>

			<h3 class="ttl"><span></span>Excepteur sint occaecat</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ullamco.
			</p>
			
			<div id="rbox">
			<span></span>Adipisicing elit, sed do eiusmod tempor sunt in culpa qui officia.
			</div>
			
			<button type="button">Deserunt Â»</button>

			<div class="cleaner"></div>

			<img class="photo" src="./Sample_files/photo2.jpg">
			<h4>Duis aute</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip.
			</p>
			<p class="link"><a href="http://colorschemedesigner.com/sample/index2.html#">Ut laboreâ€¦ Â»</a></p>
		</div>

		<div class="cleaner"></div>

		<div id="footer">
			<a href="http://colorschemedesigner.com/sample/index2.html#">Lorem</a> |
			<a href="http://colorschemedesigner.com/sample/index2.html#">Ipsum</a> |
			<a href="http://colorschemedesigner.com/sample/index2.html#">Dolor</a> |
			<a href="http://colorschemedesigner.com/sample/index2.html#">Sit amet</a> |
			<a href="http://colorschemedesigner.com/sample/index2.html#">Aliquip</a>
		</div>


	</div>

</div>


<hr>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/Scripts/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="/Scripts/jquery.form.js"></script>

<style>
    .highlight
    {
        border-style: outset !important;
        border-width: medium !important;
        background-color: Aqua !important;
    }
    .edit_form_field
    {
        float: none;
    }
</style>

<script type="text/javascript">
    var prev_selected_elem = null,
    _contents_hash = [];

    function load_ck_editor_data() {
        var editor_data = CKEDITOR.instances.Html_field.getData();
        $("#Html_field").val(editor_data);
    }
    function load_data_into_ck_editor() {
        CKEDITOR.instances.Html_field.setData($("#Html_field").val());
    }

    function unique_pairs(base_array) {
        var r = new Array();
        o: for (var i = 0, n = base_array.length; i < n; i++) {
            for (var x = 0, y = r.length; x < y; x++) {
                if (r[x].ID == base_array[i].ID) {
                    continue o;
                }
            }
            r[r.length] = base_array[i];
        }
        return r;
    }

    function fill_form_with_content(content_key) {
        var content_obj = _contents_hash[content_key];
        if (content_obj == null) {
            $("#ID_field").val("");
            $("#ID_field").attr("disabled", true);
            $("#Title_field").val("");
            $("#Html_field").val("");
            var pair = _criteria_and_element[content_key];
            $("#AttributeToMatch_field").val(pair[0]);
            $("#ElementMatchCriteria_field").val(pair[1]);
            load_data_into_ck_editor();

            $("#save_new_btn").show();
            $("#save_new_btn").attr("disabled", false);
            $("#save_btn").hide();
            $("#save_btn").attr("disabled", true);
            $("#del_btn").hide();
            $("#del_btn").attr("disabled", true);
        }
        else {
            $("#ID_field").val(content_obj.ID);
            $("#Title_field").val(content_obj.Title);
            $("#Html_field").val(content_obj.Html);
            $("#AttributeToMatch_field").val(content_obj.AttributeToMatch);
            $("#ElementMatchCriteria_field").val(content_obj.ElementMatchCriteria);
            load_data_into_ck_editor();
            //Sets up the form to allow only edits
            $("#ID_field").attr("disabled", true);

            $("#save_new_btn").hide();
            $("#save_new_btn").attr("disabled", true);
            $("#save_btn").show();
            $("#save_btn").attr("disabled", false);
            $("#del_btn").show();
            $("#del_btn").attr("disabled", false);
        }
    }

    function create_html_for_cmb(field_id, field_name, id_label_pairs) {

        //Sort the pairs
        id_label_pairs = id_label_pairs.sort(function(a, b) {
            if (a.Label == b.Label)
                return 0;
            else if (a.Label < b.Label)
                return -1;
            else if (a.Label > b.Label)
                return 1;
        }
             );

        html_txt = "<select id=\"" + field_id +
            "\" name=\"" + field_name +
            "\" >";
        html_txt += '<option value=""></option>';
        $.each(id_label_pairs, function(index, id_label_pair) {
            html_txt += '<option value="' + id_label_pair.ID + '">' + id_label_pair.Label + '</option>';
        });
        html_txt += '</select>';
        return html_txt
    }

    function IDPair() {
        this.ID = 0;
        this.Label = "";
    }

    _criteria_and_element = [];
    $(document).ready(function() {
        var pairs = []
        $("[id]").each(function(i) {
            var pair = new IDPair();
            var id = $(this).attr("id")
            pair.ID = "id='" + id + "'";
            pair.Label = "id=" + id;
            pairs.push(pair);
            _criteria_and_element[pair.ID] = pair.Label.split('=');
        });
        $("[class]").each(function(i) {
            var pair = new IDPair();
            pair.ID = "class='" + $(this).attr("class") + "'";
            pair.Label = "class=" + $(this).attr("class");
            pairs.push(pair);
            _criteria_and_element[pair.ID] = pair.Label.split('=');
        });

        //preview = window.document.body;
        //pairs = [];
        //inspect_element(pairs, preview.childNodes);
        pairs = unique_pairs(pairs);
        $("#ids").html(create_html_for_cmb("ids_field", "ids_field", pairs));

        // prepare
        $("#PageID_field").val(_page_id);

        //callback to highlight selected elements
        $("#ids_field").change(function() {
            //Highlight element(s) chosen in the combo box when selected
            var content_key = $("#ids_field").val();
            var criteria = '[' + content_key + ']';
            if (prev_selected_elem != null) {
                prev_selected_elem.removeClass("highlight");
            }
            prev_selected_elem = $(criteria);
            prev_selected_elem.addClass("highlight");
            fill_form_with_content(content_key);
        });

        //callback to handle save new record
        $("#save_new_btn").click(function(e) {
            // stop normal link click
            e.preventDefault();
            load_ck_editor_data();
            save_changes("/contents/create");
        });
        //callback to handle save existing record
        $("#save_btn").click(function(e) {
            // stop normal link click
            e.preventDefault();
            load_ck_editor_data();
            save_changes("/contents/edit/" + $("#ID_field").val());
        });
        //callback to handle delete existing record
        $("#del_btn").click(function(e) {
            // stop normal link click
            e.preventDefault();
            var result = confirm("Are you sure you want to delete this content?")
            if (result == true) {
                $.post("/contents/delete", "ids_to_delete=" + $("#ID_field").val(),
                        function(data) {
                            window.location.replace("/website/EditPage/" + $("#PageID_field").val());

                        }
                      );
            }
        });
        CKEDITOR.replace('Html');
    });

    function inspect_element(pairs, child_nodes) {
        for (var child_idx in child_nodes) {
            if (child_nodes[child_idx].id != null &&
child_nodes[child_idx].id != "") {
                var pair = new IDPair();
                pair.ID = "id=" + child_nodes[child_idx].id;
                pair.Label = "id=" + child_nodes[child_idx].id;
                pairs.push(pair);
            }
            if (child_nodes[child_idx].className != null &&
child_nodes[child_idx].className != "") {
                var pair = new IDPair();
                pair.ID = "className=" + child_nodes[child_idx].className;
                pair.Label = "className=" + child_nodes[child_idx].className;
                pairs.push(pair);
            }
            if (child_nodes[child_idx].childNodes != null &&
				   child_nodes[child_idx].childNodes.length > 0) {
                inspect_element(pairs, child_nodes[child_idx].childNodes);
            }
        }
    }

    ///Form handling

    //Sends via Ajax POST the contents of the details_form
    function save_changes(post_url) {
        //page = _all_pages[_curr_selected_record_id];
        var queryString = $('#details_form').formSerialize();
        $.post(post_url, queryString,
                    function(data) {
                        handle_response_from_crud(data, _page_id);
                    }
                  );
        return false;
    }

    function handle_response_from_crud(response_json, page_id) {

        $(".input-validation-error").removeClass("input-validation-error");
        $("#error_messages").empty();
        if (response_json.toString().substring(0, 30).toUpperCase().indexOf("<HTML") >= 0) {
            //the response is a html to display
            $("#error_messages").html(response_json);
        }
        else {
            if (response_json.type == "Error") {
                //Display the error message in each field
                violations = response_json.violations;
                err_html = "<p>The following errors ocurred:</p><ul>";
                for (var violation_idx = 0; violation_idx < violations.length;
    violation_idx++) {
                    err_html += "<li>" +
        violations[violation_idx].ErrorMessage + "</li>";
                    $("#" + violations[violation_idx].PropertyName
        + "_field").addClass("input-validation-error");
                }
                $("#error_messages").html(err_html + "</ul>");
            }
            else {
                window.location.replace("/website/EditPage/" + page_id);
            }
        }
    };


    
</script>

<div id="ids">
</div>
<form method="post" action="#" id="details_form">
<div id="error_messages" class="validation-summary-errors">
</div>
<div id="details_form_fields">
    <fieldset>
        <legend>Fields</legend>
        <div class="edit_form_field">
            <label>
                ID</label>
            <input width="21px" name="ID" id="ID_field"></div>
        <div class="edit_form_field">
            <label>
                Title</label><input width="90px" name="Title" id="Title_field">
        </div>
        <div class="edit_form_field">
            <label>
                Html</label>
            <div style="clear: left;">
            </div>
            <textarea cols="50" rows="20" name="Html" id="Html_field"></textarea></div>
        <input type="hidden" name="PageID" id="PageID_field">
        <input type="hidden" name="ElementMatchCriteria" id="ElementMatchCriteria_field">
        <input type="hidden" name="AttributeToMatch" id="AttributeToMatch_field">
        <input type="reset" value="Clear the Form">
        |
        <button name="CreateForm" id="save_btn">
            Save Changes</button>
        <button name="SaveForm" id="save_new_btn">
            Save Changes</button>
        |
        <button name="DeleteForm" id="del_btn">
            Delete</button>
</form>
<script type="text/javascript">
_page_id=8</script></fieldset></div></body></html>